<template>
	<div class="lend-record">
		<div>
			<label>{{$t('route.DeviceManager')}}</label>
			<div></div>
			<button><img /><label>{{$t('route.Lending_Logs')}}</label></button>
		</div>

		<div>
			<div>
				<el-select @change='selectChange1' style="margin-left: 10px;" v-model="query.kind" :placeholder="$t('route.Please_select_the_type')">
					<el-option v-for="item in kindList" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>

				<div class="div-handle-right">
					<el-button @click='jumpPage(0)'>{{$t('route.Add')}}</el-button>
					<el-button @click='batchDeleteClick' style="color: #FF0000;">{{$t('route.Delete')}}</el-button>
					<el-button @click="searchClick">{{$t('route.search')}}</el-button>
					<input v-model="query.search" :placeholder="$t('route.Head_Model')" />
				</div>
			</div>

			<el-table @selection-change="selectionLineChangeHandle" class="table" :data="lendRecordList"
				style="width: 100%">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="kind" :label="$t('route.kind')" />
				<el-table-column prop="noseCode" :label="$t('route.Head_Model')" />
				<el-table-column :label="$t('route.Lender2')">
					<template #default="scope">
						<div>{{ scope.row.lend }}</div>
						<div>{{ scope.row.lendMobile }}</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('route.Lender')">
					<template #default="scope">
						<div>{{ scope.row.lended }}</div>
						<div>{{ scope.row.lendedMobile }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="lendDate" :label="$t('route.Lending_date')" />
				<el-table-column prop="agreedReturnDate" :label="$t('route.Agreed_Return_Date')" />
				<el-table-column :label="$t('route.Return_to_Recipient')">
					<template #default="scope">
						<div>{{ scope.row.receiver }}</div>
						<div>{{ scope.row.receiverMobile }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="actualReturnDate" :label="$t('route.Actual_return_date')" />
				<el-table-column :label="$t('route.state')">
					<template #default="scope">
						<label>{{ scope.row.state ? $t('route.Returned') : $t('route.Not_returned') }}</label>
					</template>
				</el-table-column>
				<el-table-column prop="date" :label="$t('route.Whether_the_acceptance_is_qualified')">
					<template #default="scope">
						<label v-if="scope.row.state">{{ scope.row.qualified ? $t('route.qualified') : $t('route.unqualified') }}</label>
					</template>
				</el-table-column>
				<el-table-column :label="$t('route.operate')">
					<template #default="scope">
						<el-button type="text" @click='returnClick(scope.row)'>{{ $t('route.qualified') }}</el-button>
						<el-button v-if="scope.row.state" style="color: #FF0000;" type="text"
							@click='deleteClick(scope.row.id)'>{{ $t('route.Delete') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination style="float: right;" background @current-change="handlePageChange"
					:current-page="query.pageNum" :page-size="query.pageSize" layout="total, prev, pager, next"
					:total="query.total"></el-pagination>
			</div>

		</div>
		<el-dialog :title="$t('route.qualified')" width="30%" v-model="dialogShow1" :draggable='true'>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item :label="$t('route.Return_to_Recipient')">
					<el-input class="input" v-model="form.receiver" />
				</el-form-item>
				<el-form-item :label="$t('route.contact_number')">
					<el-input class="input" v-model="form.receiverMobile" />
				</el-form-item>
				<el-form-item :label="$t('route.Qualified_or_not')">
					<el-switch v-model="form.qualified" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click='saveClick'>{{ $t('route.sure') }}</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>


	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from '../../js/common/constant.js'
import i18n from '../../i18n/index';
export default {
	data() {
		return {
			query: {
				kind: i18n.global.t('route.All_categories'),
				pageNum: 1,
				pageSize: 10,
				total: 0,
				search: null,
			},
			lendRecordList: [],
			dialogShow1: false,
			form: {
				receiver: null,
				receiverMobile: null,
				qualified: true,
			},
			selLendRecord: null,
			kindList: [i18n.global.t('route.All_categories'), ...Constant.DEVICE_KIND],
			checkRows: [],
		};
	},
	methods: {
		batchDeleteClick() {
			if (this.checkRows.length == 0) return;
			this.$confirm(i18n.global.t('route.continue'), i18n.global.t('route.reminder'), {
				confirmButtonText: i18n.global.t('route.sure'),
				cancelButtonText: i18n.global.t('route.cancel'),
				type: 'warning'
			}).then(() => {
				var lendRecordIdList = [];
				for (var item of this.checkRows) {
					if (item.state) lendRecordIdList.push(item.id);
				}
				http.post(api.DELETE_LEND_RECORD_LIST, {
					lendRecordIdList: lendRecordIdList,
				}, data => {
					this.$message.success(i18n.global.t('route.Delete_succeeded'));
					this.getLendRecordList();
				})
			});
		},
		selectionLineChangeHandle(val) {
			this.checkRows = val;
			console.log(JSON.stringify(this.checkRows));
		},
		selectChange1() {
			this.query.pageNum = 1;
			this.getLendRecordList();
		},

		handlePageChange(pageNum) {
			this.query.pageNum = pageNum;
			this.getLendRecordList();
		},
		jumpPage(type) {
			if (type == 0) {
				this.$router.push("/add-lend-record");
			}
		},
		searchClick() {
			this.query.pageNum = 1;
			this.getLendRecordList();
		},
		getLendRecordList() {
			http.post(api.GET_LEND_RECORD_LIST, {
				adminId: this.$store.state.user.id,
				kind: this.query.kind == i18n.global.t('route.All_categories') ? null : this.query.kind,
				search: this.query.search,
				pageNum: this.query.pageNum,
				pageSize: this.query.pageSize
			}, data => {
				this.lendRecordList = data.data.lendRecordList;
				this.query.total = data.data.total;
			})
		},
		returnClick(item) {
			this.dialogShow1 = true;
			this.selLendRecord = item;
		},
		saveClick() {
			if (CommonUtils.isEmpty(this.form.receiver)) {
				this.$message.error(i18n.global.t('route.Return_recipient_cannot_be_blank'));
				return;
			}
			if (CommonUtils.isEmpty(this.form.receiverMobile)) {
				this.$message.error(i18n.global.t('route.Contact_number_cannot_be_empty'));
				return;
			}
			this.updateLendRecord();
		},
		updateLendRecord() {
			http.post(api.UPDATE_LEND_RECORD, {
				lendRecordId: this.selLendRecord.id,
				receiver: this.form.receiver,
				receiverMobile: this.form.receiverMobile,
				state: true,
				qualified: this.form.qualified,
			}, data => {
				this.$message.success(i18n.global.t('route.Return_ucceeded'));
				this.getLendRecordList();
				this.dialogShow1 = false;
			})
		},
		deleteClick(lendRecordId) {
			this.$confirm(i18n.global.t('route.continue1'), i18n.global.t('route.reminder'), {
				confirmButtonText: i18n.global.t('route.sure'),
				cancelButtonText: i18n.global.t('route.cancel'),
				type: 'warning'
			}).then(() => {
				http.post(api.DELETE_LEND_RECORD, {
					lendRecordId: lendRecordId,
				}, data => {
					this.$message.success(i18n.global.t('route.Delete_succeeded'));
					this.getLendRecordList();
				})
			});

		},
		getAllKind() {
			http.post(api.GET_ALL_KIND, {
				adminId: this.$store.state.user.id,
			}, data => {
				this.kindList = [i18n.global.t('route.All_categories'), ...data.data];
			})
		},


	},
	created() {
		this.getAllKind();
		this.getLendRecordList();
	},

};
</script>
<style lang="scss" scoped>
.lend-record {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;

	>div:nth-of-type(1) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		>label:nth-of-type(1) {
			font-weight: 600;
		}

		>div:nth-of-type(1) {
			width: 1px;
			background-color: #cccccc;
			height: 15px;
			margin: 0px 20px;
		}

		>button:nth-of-type(1) {
			background-image: url(../../assets/img/customer-1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			border: 0px;
			display: flex;
			color: #ffffff;
			flex-direction: row;
			align-items: center;
			font-weight: 800;

			>img {
				margin-right: 7px;
				width: 15px;
				height: 15px;
				content: url(../../assets/img/customer-2.png);
			}
		}
	}

	>div:nth-of-type(2) {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;


		>div:nth-of-type(1) {
			display: flex;
			flex-direction: row;
			align-items: center;

			.div-handle-right {
				flex: 1;
				flex-direction: row-reverse;
				text-align: right;
				display: flex;
				align-items: center;

				>input:nth-of-type(1) {
					border: 1px solid #eeeeee;
					font-size: 15px;
					width: 200px;
					padding: 5px 8px;
					outline: none;
				}

				>button {
					color: #A866FF;
					margin-left: 10px;
					padding: 4px 20px;
				}
			}
		}

		.table {
			margin-top: 20px;
		}

	}

	.select {
		width: 120px;
		margin-top: 10px;
	}

	.echart {
		height: 150px;
		width: 100%;
	}

	.input {
		width: 250px;
	}


}
</style>
